<template>
	<div class="tab-control">
		<div class="tab-item" v-for="(item, index) in changes" :class="{active : index === currentIndex}"
			@click="changeTabControl(index)" :key="index">
			<span>{{item.name}}</span>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'HomeTabControl',
		data() {
			return {
				changes: [{
						name: '时尚套装'
					},
					{
						name: '百搭卫衣'
					},
					{
						name: '短款T恤'
					},
					{
						name: '人气套餐'
					},
				],
				currentIndex: 0
			}
		},
		methods: {
			changeTabControl(index) {
				this.currentIndex = index
			}
		}


	}
</script>

<style>
	.tab-control {
		margin: 5px auto;
		text-align: center;
		display: flex;
		position: sticky;
		top: 44px;
	}

	.tab-item {
		flex: 1;
		height: 44px;
		font-size: 14px;
		line-height: 44px;
		background-color: #FFFFFF;
	}

	.active {
		color: var(--color-high-text);
	}
	.active span {
		border-bottom: 5px solid var(--color-tint);
		padding: 5px;
	}
</style>
